// 箱体图 需要使用echarts5
(function () {
    // const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8878F6", "#f0f"];
    let oEchart = echarts.init(document.getElementById('boxplotChart'));
    

    const getRandom = (n, m) => Math.round(Math.random() * (m - n) + n);
    // 计算数组的盒须数
    const getboxData = (data = []) => {
        const defaltData = [0,0,0,0,0]
        const leng = data.length
        if(leng === 0){
            data = defaltData
        } else if(leng < 5){
            data = defaltData.slice(leng).concat(data)
        }
        // 顺序：["min", "Q1", "median", "Q3", "max"]
        // 下限值：下四分位数 中位数：上四分位数：上限值：

        // var mean = data.reduce(function(x,y){ return x+y;})/data.length; // 平均值
        // var deviations = data.map(function(x){return x-mean;}); // 偏差
        // var stddev = Math.sqrt(
        //                 deviations.map(function(x){ return x*x;})
        //                 .reduce(function(x,y){ return x+y;})/(data.length-1)
        //             ); // 标准差

        var max = Math.max.apply(null,data) // 最大值
        var min = Math.min.apply(null,data) // 最小值
        var mid; //中位数
        data.sort(); //数组排序
        if (data.length%2==0){
            mid = (data[data.length/2]+data[data.length/2+1])/2
        }
        if (data.length%2!=0){
            mid = data[(data.length+1)/2 - 1]
        }
        const Q1 = data[Math.round(data.length/4)] // "上四分位数:"
        const Q3 = data[Math.round(data.length/4*3)] // 下四分位数:
        return [min, Q1, mid, Q3, max]
    }

    const getRandonData = (length) => {
        let seriesData = [];
        for (let i = 0; i < length; i++) {
            let cate = [];
            for (let j = 0; j < 20; j++) {
                cate.push(getRandom(300, 800));
            }
            seriesData.push(getboxData(cate));
        }
        return seriesData;
    };

    /**
     * @description 将接口数据转化为符合 echarts 的数据
     * @param {array} source 数据源
     * @param {boolean} diff 是否按AQI等级拆分数据
     * @returns echartsData 符合echarts配置数据
     */
    const transformData = (xData, factor) => {
        const xAxisData = xData.map((v) => v.name);
        const seriesDatas = factor.map(() => getRandonData(xAxisData.length));
        return {
            xAxisData,
            seriesDatas,
        };
    };
    
    const selected = [
        { code: '320505001', name: '北京' },
        { code: '320505002', name: '上海' },
        { code: '320505003', name: '天津' },
        { code: '320505004', name: '石家庄' },
        { code: '320505005', name: '广州' },
        { code: '320505100', name: '深圳' },
        { code: '320505101', name: '厦门' },
        { code: '320505407', name: '杭州' },
    ];

    const legendData = ["70年", "80年", "90年"];
    const { xAxisData, seriesDatas } = transformData(selected, legendData);
    const series = legendData.map((v, i) => ({
        name: v,
        type: 'boxplot',
        data: seriesDatas[i],
    }))
    // [1,2,3,4,5]

    // console.log(seriesDatas, 'seriesDatas')
    // console.log(xAxisData, 'xAxisData')
    // console.log(series, 'series')

    const formatter = (params) => {
        let txt = '';
        txt += params.seriesName + '<br>' 
            + params.marker + '上限值：' + params.data[5] + '<br>' 
            // + params.marker + '上四分位数：' + params.data[4] + '<br>' 
            // + params.marker + '中位数：' + params.data[3] + '<br>' 
            // + params.marker + '下四分位数:' + params.data[2] + '<br>' 
            + params.marker + '下限值：' + params.data[1] + '<br>' 
        return txt
    }

    option = {
        legend: {
            top: 0,
        },
        tooltip: {
            trigger: 'item',
            formatter: formatter
        },
        grid: {
            top: '10%',
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
        },
        yAxis: {
            type: 'value',
            name: '值',
            min: 0,
            max: 1000
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: seriesDatas[0].length > 3 ? Math.round(100 / (seriesDatas[0].length / 2)) : 100
            },
            {
                show: true,
                type: 'slider'
            }
        ],
        series: series,
    };


    oEchart.setOption(option)
})()